<template>
	<view>
		<!-- #ifndef MP -->
		<view class="sys-head" :style="{ height: statusBarHeight }"></view>
		<!-- #endif -->
		<view class="content">
			<view class="acea-row row-top row-between title">
				<view class="">
					<view class="title-black">编辑您的期望</view>
					<view class="title-gray">根据你的需求推荐更合适的内容</view>
				</view>
				<view class="statistics">

				</view>
			</view>
			<view class="acea-row row-top row-between item" v-for="(item,index) in navList" :key="index">
				<view class="itemCon">
					<view class="item_title">{{ item.name }}</view>
					<u-icon name="minus-circle" color="red" size="18" class="item_icon" @click="delData(item)" />
				</view>
				<!-- @click="toPage('/pages/releases/expectedEvent/expectedEvent?item='+ JSON.stringify(item))" -->
				<view class="item_icon sanjiao-right"></view>
			</view>

		</view>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import * as t from '@/api/template.js'
	export default {
		data() {
			return {
				statusBarHeight: statusBarHeight,
				navList: [],
			}
		},
		onShow() {
			this.getNavData()
		},
		methods: {
			async getNavData() {
				try {
					let {
						data
					} = await t.UserMatchlistApi();

					this.navList = data.list.map(item => {
						let o = {}
						for (let k in item) {
							if (item[k]) {
								o[k] = item[k]
							}
						}
						return o
					});

					// this.getList(this.navList[0])
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			delData(data){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定取消当前模板选中?',
					success: function (res) {
						if (res.confirm) {
							DelUserMatch(data.templateId).then(res=>{
								that.$util.Tips({
									title:'删除成功'
								})
								that.getNavData()
								uni.$emit('refshLease')
							})
						} else if (res.cancel) {
				
						}
					}
				});
				
			}

		},
		onReachBottom() {
			this.page++;
			this.initList()
		}
	}
</script>

<style lang="scss">
	.type-bg {
		padding: 24rpx 30rpx;
		background: rgba(247, 248, 250, 1);

		.type~.type {
			margin-left: 22rpx;
		}

		.type {
			display: inline-block;
			white-space: nowrap;
			padding: 6rpx 24rpx;
			border-radius: 10rpx;
			border: 1px solid rgba(229, 229, 229, 1);
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
		}

		.type-on {
			border: 1px solid rgba(238, 33, 45, 1);
			background: rgba(238, 33, 45, 1);
			color: #ffffff;

		}
	}

	.content {
		padding: 26rpx;
	}

	.statistics {
		height: 62rpx;
		line-height: 62rpx;
		font-weight: 600;

		.u_Number {
			color: rgba(238, 33, 45, 1);
			font-size: 32rpx;
		}
	}

	.title {
		margin-bottom: 50rpx;

		.title-black {
			font-size: 48rpx;
			font-weight: 700;
			color: rgba(0, 0, 0, 1);
		}

		.title-gray {
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
			margin-top: 10rpx;
		}
	}

	.sanjiao-right {
		padding-right: 32rpx;
		position: relative;
	}

	.sanjiao-right::after {
		position: absolute;
		display: block;
		content: '';
		width: 12rpx;
		height: 12rpx;
		border-top: 1px solid rgba(212, 212, 212, 1);
		border-right: 1px solid rgba(212, 212, 212, 1);
		transform: rotate(45deg);
		right: 0;
		top: 50%;
		margin-top: -6rpx;
	}

	.item {
		margin-top: 10rpx;
		width: 100%;
		.itemCon {

			padding-right: 20rpx;
			display: flex;
			justify-content: space-between;

			.item_title {
				font-size: 30rpx;
				color: rgba(0, 0, 0, 1);
				margin-right: 10px;
			}
		}


		.info {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
			margin-top: 10rpx;
		}

		.item_icon {
			line-height: 82rpx;
			height: 82rpx;
			color: #ccc;
		}
	}

	.add_btn {
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 80%;
		height: 82rpx;
		border: 2rpx dashed rgba(238, 33, 45, 1);
		margin: 40rpx auto;
		border-radius: 15rpx;
		line-height: 82rpx;
		text-align: center;
		color: rgba(238, 33, 45, 1);
		font-weight: 600;
		background: #fff;
	}
</style>